[jQuery] 무한 스크롤 구현하기, 스크롤 이벤트 scroll()

자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 들을 수 있습니다. 아래에서는 무한스크롤이란 무엇이고 자바스크립트 라이브러리 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는 방법에 대해 알아보겠습니다. 먼저 무한스크롤이란 무엇일가요?

! 자바스크립트의 무한스크롤(Infinite Scroll)이란?

무한 스크롤이란 사용자 인터렉션(Interaction)의 하나로 방문자의 스크롤을 브라우저의 끝으로 내릴 경우 새로운 콘텐츠가 계속해서 생겨나 끊임없이 스크롤을 해야하는 이벤트의 반복을 의미합니다. 즉 이를 구현하면 방문자는 스크롤을 계속 내리면서 새로운 콘텐츠를 페이지 전환없이 계속해서 볼 수 있게 됩니다.
무한스크롤은 계속해서 새로운 콘텐츠를 제공함
@ 무한 스크롤의 장점
이런 화면 인터렉션의 장점은? 무엇보다 새로운 콘텐츠를 쉽고 편리하게 계속해서 볼 수 있는 가장 효과적인 UI/UX를 제공합니다. 만약 이 방식이 아니라면? 사용자는 페이지를 전환할 수 있는 페이지네이션 등의 방법으로 다른 콘텐츠... 즉 2페이지, 3페이지 등을 이동하면서 봐야 할 것입니다. 이 방식도 나쁜 방식은 아니지만 최근에는 Ajax를 활용한 무한 스크롤 방식이 굉장히 많이 사용되고 있습니다. Vingle, Facebook 등이 이런 방식이죠

! 참고사항

참고로 페이지 전환이 없다는 것은 이탈율(Bounce Rate)을 높이는 원인이 되기도 합니다. 더 쉽고 간단한 UI 제공으로 방문자의 체류시간을 늘릴 수 있겠지만 이탈율이 줄어들 수 있으므로 이를 고려할 필요가 있다하겠습니다. 사실 이탈율, 체류시간 모두 방문자 유입에 대한 공통의 목적을 가지고 있으므로 전체적인 방문자 트래픽에는 큰 영향이 없을 것입니다.

그렇다면 무한 스크롤을 구현하기 위해 무엇을 해야할까요? 기본적으로 다음과 같은 프로세스가 필요합니다.


:+: 무한 스크롤에 필요한 프로세스

• 1. 스크롤이 페이지 최하단에 위치했는지를 확인
• 2. 1번에서 최하단이라면 예정된 이벤트(추가 콘텐츠)를 실시
• 3. 이벤트를 통해 추가되는 콘텐츠가 비동기식(ajax)으로 하단에 추가됨
• 4. Ajax가 끝났다면 스크롤 이벤트의 콜백 함수를 반복해서 실행(Throttle 방식)

이 무한 스크롤을 구현하기 위해서는 필요한 몇가지 함수, 메소드가 있습니다. 여기에 사용되는 함수들은 다음과 같습니다.

$(document).scroll() // 스크롤이 변경될때마다 이벤트를 발생시킴
$(document).height() // 현재페이지(문서)의 높이
$(window).height() // 윈도우의 크기
$(window).scrollTop() // 브라우저의 스크롤 위치값

위의 함수가 이 무한 스크롤의 핵심적인 부분이라 할 수 있습니다. 현재 페이지의 전체높이가 화면의 스크롤의 위치값과 윈도우의 크기를 합산한 값이 클 경우 해당 함수를 실행하게 됩니다.

현재페이지(문서)의 높이 <= 윈도우의 크기 + 브라우저의 스크롤 위치값

위에서 비동기식 방식에 대하여 언급을 하였습니다. 비동기식(ajax)은 페이지의 전환이 없이도 새로운 데이터를 서버에서 불러와 추가할 수 있는 방법입니다. 무한스크롤은 비동기 방식이 반드시 필요하므로 이에 대하여 알아야합니다. 그럼 아래 예제를 통해 더 자세히 알아보시기 바랍니다.

# 무한 스크롤 예제소스 보기

그럼 아래에서는 실제로 무한스크롤을 간단하게 구현하여보겠습니다. 먼저 html 코드입니다.

위 코드는 글이 5개 존재합니다. 만약 스크롤을 내리면 새로운 글 6부터 추가적으로 5개를 더 불러와 하단에 추가할 수 있겠죠~

이번에는 자바스크립트 코드입니다.

위 예제는 webisfree.com의 메인페이지 코드중 일부입니다. 설명하자면... 클래스 articleView에는 몇개의 글(article)이 포함되어 있습니다. 이 글이 스크롤을 내려 최하단에 위치할 경우 scroll 이벤트가 발생하게되며 이 이벤트는 ajax() 비동기함수를 실행하게 됩니다. ajax()가 성공할 경우 해당하는 콘텐츠 영역에 불러온 새로운 글을 추가하게됩니다.

여기서는 append()를 사용하는 부분은 생략되어 있습니다. 또한 Throttle 방식의 구현 역시 생략되어 있는데요... 즉 ajax를 이미 호출한 경우라면? 당연히 추가적인 ajax 호출이 불필요하므로 ajax 호출이 끝났음을 확인한 후에 ajax를 다시 호출해야 합니다. 그렇지 않으면? 계속해서 ajax를 호출하는 문제가 발생하게 됩니다. 즉 불필요한 트래픽 및 서버 부하를 가져올 수 있겠죠.

관련 링크 바로가기 >
https://webisfree.com/2015-07-09/[제이쿼리]-비동기식-호출-ajax()-메소드-알아보기

위 예제에서 ajax()를 실행하는 if문을 보시면 maxHeight <= currentScroll + 100이라는 코드가 있습니다. 여기서 100은 현재 스크롤 위치값에 약간의 보정치를 추가한 부분입니다. 이를 사용하여 사용자가 반드시 최하단이 아니라 하단보다 조금 위에 위치했더라도 미리 새로운 콘텐츠가 추가될 수 있습니다. 또 다른 이유로 비동기 방식의 호출은 웹콘텐츠를 로딩하는대 지연시간이 발생하므로 최하단값과 스크롤 위치를 동일하게 할 경우 방문자는 조금 늦게 콘텐츠가 보일 수 있으므로 이를 추가로 보정하기 위한 값으로 100을 설정했습니다.

100이라는 숫자는 정확한 값이 아니므로 원하는 값을 설정하여 적당한 위치에 도달했을 때 새로운 콘텐츠가 추가될 수 있을 것입니다.

# 마치면서

무한스크롤을 구현할 경우 비동기 방식을 사용하므로 전체 페이지를 로딩하지 않아도 되는 장점이 있습니다. 다만 생각할 부분도 몇 가지 있는데 이를 간단히 알아봅니다.

! 스크롤로 콘텐츠가 늘어난 후 페이지 리로드할 경우

만약 콘텐츠가 하단에 추가된 후 페이지를 다른 곳으로 이동하거나 리로드 된 경우를 생각해 볼 수 있습니다. 이 경우 기존에 하단에 추가된 콘텐츠가 사라지게되므로 방문자는 다시 스크롤을 내려야만하는 불편함을 줄 수 있죠..

어찌보면 큰 차이는 아닐 것입니다. 스크롤을  통해 추가로 콘텐츠를 본다해도 한없이 내려서 볼 사람이 그리 많지는 않기 때문입니다. 하지만! 이런 작은 불편들이 쌓이면 방문자에게 안좋은 경험을 선사할 수 있으므로 가급적 이런 요소는 줄이거나 개선이 필요할 것입니다.

@ 해결방안은?
이런 경우 페이지에 새롭게 로딩된 콘텐츠 개수를 기억해두면 해결될 수 있습니다. 방문자가 다시 로딩하거나 페이지 이동 후 다시 돌아와도 얼만큼 페이지를 로딩했는지 알고 있으므로 다시 하단에 콘텐츠를 추가하면 될 것입니다.

추가된 콘텐츠 개수는 localStorage, sessionStorage 또는 쿠키 등을 사용하여 저장할 수 있습니다. 여기까지 무한스크롤을 알아보았습니다.